<template>
  <div class="robot">
    <el-card>
      <!-- 筛选条件 -->
      <div class="searchBox">
        <div class="displayPage">
          <p class="p">性别</p>
          <el-select v-model="sex" slot="prepend" placeholder="不限">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </div>
        <div class="displayPage">
          <p class="p">时间</p>
          <el-date-picker
            style="margin-right: 20px"
            v-model="TimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
        </div>
        <el-input placeholder="请输入昵称" v-model="nickname">
          <template slot="prepend">昵称</template>
        </el-input>
        <el-input
          v-if="activeName != '3'"
          placeholder="请输入内容"
          v-model="id"
        >
          <template slot="prepend">ID</template>
        </el-input>
        <el-input
          v-if="activeName != '3'"
          placeholder="请输入内容"
          v-model="number"
        >
          <template slot="prepend">手机号</template>
        </el-input>
        <el-input
          v-if="activeName == '1'"
          placeholder="请输入内容"
          v-model="bigID"
        >
          <template slot="prepend">大号ID</template>
        </el-input>
        <el-input
          v-if="activeName == '1'"
          placeholder="请输入内容"
          v-model="bigNum"
        >
          <template slot="prepend">大号手机号</template>
        </el-input>
        <div v-if="activeName == '1'" class="displayPage">
          <p class="p">是否绑定大号</p>
          <el-select v-model="isBig" slot="prepend" placeholder="不限">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="2"></el-option>
          </el-select>
        </div>
        <el-button @click="search" type="primary">搜索</el-button>
      </div>
      <!-- 选项卡 -->
      <el-tabs
        style="margin-top: 30px"
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane label="机器人列表" name="1">
          <el-table :data="tableData" v-loading="loading" style="width: 100%">
            <el-table-column prop="nick_name" label="机器人昵称">
            </el-table-column>
            <el-table-column prop="id_code" label="机器人ID"> </el-table-column>
            <el-table-column prop="account" label="机器人手机号">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
              <template slot-scope="scope">
                {{ scope.row.sex == "2" ? "女" : "男" }}
              </template>
            </el-table-column>
            <el-table-column prop="credit" label="心动值"> </el-table-column>
            <el-table-column prop="verified_name" label="标签">
            </el-table-column>
            <el-table-column prop="phone" label="大号手机号"> </el-table-column>
            <el-table-column prop="imageUrl" label="私密相册">
              <template slot-scope="scope">
                <img
                  v-if="scope.row.photo"
                  :src="scope.row.photo"
                  style="width: 100px; height: 100px"
                  preview
                  alt="加载失败"
                  class="img"
                />
                <i v-else></i>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="280px">
              <template slot-scope="scope">
                <el-button @click="revise(scope.row)" size="mini"
                  >编辑</el-button
                >
                <el-button size="mini">注销</el-button>
                <el-button @click="add(scope.row)" size="mini"
                  >添加动态</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="机器人动态" name="2">
          <el-button @click="addRobt" style="float: right; margin: 10px"
            >添加动态</el-button
          >
          <el-table
            :data="tableDataDynamic"
            ref="multipleTables"
            tooltip-effect="dark"
            v-loading="loading1"
            @selection-change="handleSelectionChange"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="create_time" label="发布时间">
            </el-table-column>
            <el-table-column prop="nick_name" label="机器人昵称">
            </el-table-column>
            <el-table-column prop="user_id" label="机器人ID"> </el-table-column>
            <el-table-column prop="account" label="机器人手机号">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
              <template slot-scope="scope">
                {{ scope.row.sex == "1" ? "男" : "女" }}
              </template>
            </el-table-column>
            <el-table-column prop="title" label="内容"> </el-table-column>
            <el-table-column prop="" label="视频图片">
              <template slot-scope="scope">
                <!-- <img :src="imageUrl" preview alt="加载失败" class="img" /> -->
                <el-image
                  v-if="scope.row.photos.length >= 1"
                  style="width: 100px; height: 100px"
                  :src="scope.row.photos.join('')"
                >
                </el-image>
                <video
                  style="width: 100%; height: 100%"
                  v-if="scope.row.video"
                  :src="scope.row.video"
                ></video>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="240px">
              <template slot-scope="scope">
                <el-button size="mini" @click="del(scope.row)">删除</el-button>
                <el-button
                  type="success"
                  v-if="scope.row.recommended == 0"
                  plain
                  size="small "
                  @click="recommended('1', scope.row)"
                  >推荐</el-button
                >
                <el-button
                  type="danger"
                  @click="recommended('0', scope.row)"
                  v-else
                  plain
                  size="small "
                  >取消推荐</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px">
            <el-button @click="toggleSelection()">全部删除</el-button>
            <el-button @click="recommendAll()">全部推荐</el-button>
          </div>
          <pagination
            v-show="total1 > 0"
            :total="total1"
            :page.sync="page1"
            :limit.sync="pageSize1"
            @pagination="getList1"
          />
        </el-tab-pane>
        <el-tab-pane label="机器人礼物获得" name="3">
          <el-table
            :data="tableDataGift"
            v-loading="loading2"
            style="width: 100%"
          >
            <el-table-column prop="create_time" label="时间"> </el-table-column>
            <el-table-column prop="give_nick_name" label="赠送人">
            </el-table-column>
            <el-table-column prop="give_user_id" label="赠送ID">
            </el-table-column>
            <el-table-column prop="price" label="礼物价值"> </el-table-column>
            <el-table-column prop="id_code" label="机器人ID"> </el-table-column>
            <el-table-column prop="account" label="机器人手机号">
            </el-table-column>
            <el-table-column prop="nick_name" label="机器人昵称">
            </el-table-column>
          </el-table>
          <pagination
            v-show="total2 > 0"
            :total="total2"
            :page.sync="page2"
            :limit.sync="pageSize2"
            @pagination="getList2"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 编辑机器人弹框 -->
    <el-dialog title="编辑" :visible.sync="AddDialogVisible" width="38%">
      <el-form :model="form" label-position="right" label-width="100px">
        <el-form-item label="ID">
          <el-input v-model="form.user_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="1" disabled>男</el-radio>
          <el-radio v-model="form.sex" label="2" disabled>女</el-radio>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.nickName"></el-input>
        </el-form-item>
        <el-form-item label="心动值">
          <el-input v-model="form.num"></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="form.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="私密相册">
          <el-image style="width: 100px; height: 100px" :src="form.url">
          </el-image>
        </el-form-item>
        <el-form-item label="大号ID">
          <el-input v-model="form.bigID"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="SubmitRevise">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加动态弹框 -->
    <el-dialog title="添加动态" :visible.sync="dialogFormVisibleA" width="30%">
      <el-form :model="formA" label-width="80px" :rules="rules">
        <el-form-item label="ID">
          <el-input disabled v-model="formA.id"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="formA.textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="动态类型" prop="medias_type">
          <el-radio v-model="form.medias_type" label="1">图片</el-radio>
          <el-radio v-model="form.medias_type" label="2">视频</el-radio>
        </el-form-item>
        <el-form-item label="添加附件" prop="medias.path">
          <el-upload
            class="upload-demo"
            :http-request="upLoad"
            :on-change="uploadVideoChange"
            :before-upload="beforeUpload"
            :on-preview="handlePictureCardPreview"
            action
            drag
            ref="upload"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="addRobot">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 添加动态弹框2 -->
    <el-dialog title="添加动态" :visible.sync="dialogFormVisibleB" width="30%">
      <el-form :model="formA" label-width="80px" :rules="rules">
        <el-form-item label="ID">
          <el-input placeholder="请输入机器人ID" v-model="formA.id"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="formA.textarea"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="动态类型" prop="medias_type">
          <el-radio v-model="form.medias_type" label="1">图片</el-radio>
          <el-radio v-model="form.medias_type" label="2">视频</el-radio>
        </el-form-item>
        <el-form-item label="添加附件" prop="medias.path">
          <el-upload
            class="upload-demo"
            :http-request="upLoad"
            :on-change="uploadVideoChange"
            :before-upload="beforeUpload"
            :on-preview="handlePictureCardPreview"
            action
            drag
            ref="upload"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleA = false">取 消</el-button>
        <el-button type="primary" @click="addRobotB">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
import {
  getRobot_api,
  getRobotDynamic_api,
  addRobot_api,
  editRobot_api,
  getRobotGiftList_api,
  delRobotDynamic_api,
} from "@/api/operationManagement";
import { adminEngageClose } from "@/api/AuditManagement";
export default {
  components: { Pagination },
  data() {
    return {
      // 筛选参数
      TimeVal: "", //时间日期选择
      //   日期时间选择器数组
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeStart: "", //开始时间
      timeEnd: "", //结束时间
      sex: "", //性别
      nickname: "", //昵称
      id: "", //ID
      number: "", //手机号
      bigID: "", //大号ID
      bigNum: "", //大号手机号
      isBig: "", //是否绑定大号

      // 选项卡
      activeName: "1",

      //   机器人列表
      tableData: [],
      loading: false,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数

      //   编辑动态弹框
      form: {
        user_id: "", //id
        phone: "",
        nickName: "",
        num: "",
        title: "",
        sex: "", //性别
        url: "",
        bigID: "",
      },
      AddDialogVisible: false, //弹窗开关

      // 添加动态
      formA: {
        id: "",
        textarea: "",
        medias_type: "1",
        medias: {
          path: "", //路径
        },
      },
      videoTime: "",
      videoWidth: "",
      videoHeight: "",
      dialogFormVisibleA: false,

      rules: {
        //规则
        // user_id: [{ required: true, message: "请输入ID", trigger: "blur" }],
        medias_type: [
          { required: true, message: "请选类型", trigger: "change" },
        ],
        "medias.path": [
          { required: true, message: "请选类型", trigger: "change" },
        ],
      },

      //   机器人动态列表
      multipleSelection: [],
      tableDataDynamic: [],
      loading1: false,
      total1: 0,
      page1: 1, //页码
      pageSize1: 10, //每页条数
      dialogFormVisibleB: false,
      ids: [],
      idsRecommend: [],
      idsRecommendAll: [],

      //   机器人礼物获得列表
      tableDataGift: [],
      loading2: false,
      total2: 0,
      page2: 1, //页码
      pageSize2: 10, //每页条数
    };
  },
  created() {
    this.getRobotList();
  },
  methods: {
    //获取开始/结束时间
    focus(time) {
      if (!this.TimeVal) {
        this.TimeVal = [];
      }
      this.timeStart = this.TimeVal[0];
      this.timeEnd = this.TimeVal[1];
    },

    // 搜索
    search() {
      if (this.activeName == "1") {
        this.getRobotList();
      } else if (this.activeName == "2") {
        this.getRobotDynamic();
      } else if (this.activeName == "3") {
        this.getRobotGift();
      }
    },
    // 获取机器人列表
    async getRobotList() {
      this.loading = true;
      let { code, data } = await getRobot_api({
        sex: this.sex,
        nick_name: this.nickname,
        id_code: this.id,
        startTime: this.startTime,
        account: this.number,
        endTime: this.endTime,
        page: this.page,
        pageSize: this.pageSize,
        idBigNum: this.isBig,
        bigNum: this.bigNum,
        bigID: this.bigID,
      });
      if (code == 0) {
        console.log(data, "数据");
        this.tableData = data.list;
        this.total = parseInt(data.count);
        this.loading = false;
      }
    },
    // 获取机器人动态
    async getRobotDynamic() {
      // this.loading1 = true;
      let { code, data } = await getRobotDynamic_api({
        sex: this.sex,
        page: this.page1,
        pageSize: this.pageSize1,
        startTime: this.startTime,
        endTime: this.endTime,
        nick_name: this.nickname,
        user_id: this.id,
        account: this.number,
      });
      if (code == 0) {
        console.log(data, "22222");
        this.tableDataDynamic = data.list;
        this.total1 = parseInt(data.total);
      }
    },
    // 删除机器人动态
    del(row) {
      this.$confirm("是否删除动态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let { code, data } = await delRobotDynamic_api({
            id: [row.id],
          });
          if (code == 0) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getRobotDynamic();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 全部删除动态
    toggleSelection() {
      if (this.ids.length >= 1) {
        this.$confirm("是否删除所有动态?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let { code, data } = await delRobotDynamic_api({
              id: this.ids,
            });
            if (code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getRobotDynamic();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.$message.error("请先选择");
      }
    },
    // 推荐
    async recommended(recommended, row) {
      let { code, data } = await adminEngageClose({
        type: "1",
        recommended,
        id: [row.id],
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.getRobotDynamic();
      }
    },
    // 全部推荐
    async recommendAll() {
      if (this.idsRecommendAll.length >= 1) {
        let { code, data } = await adminEngageClose({
          type: "1",
          recommended: "1",
          id: this.idsRecommendAll,
        });
        if (code == 0) {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getRobotDynamic();
        }
      } else {
        this.$message.error("请先选择");
      }
    },
    // 机器人礼物获得列表
    async getRobotGift() {
      let { code, data } = await getRobotGiftList_api({
        startTime: this.timeStart,
        endTime: this.timeEnd,
        sex: this.sex,
        nick_name: this.nickname,
        page: this.page2,
        pageSize: this.pageSize2,
      });
      if (code == 0) {
        console.log(data, "3333");
        this.tableDataGift = data.list;
        this.total2 = parseInt(data.count);
      }
    },
    getList() {
      this.getRobotList();
    },
    getList1() {
      this.getRobotDynamic();
    },
    getList2() {
      this.getRobotGift();
    },

    //   选项卡
    handleClick(tab, event) {
      if (this.activeName == "1") {
        this.getRobotList();
      } else if (this.activeName == "2") {
        this.getRobotDynamic();
      } else if (this.activeName == "3") {
        this.getRobotGift();
      }
    },
    // 机器人动态列表多选
    handleSelectionChange(val) {
      // console.log(val);
      val.forEach((item) => {
        this.ids.push(item.id);
      });
      this.idsRecommend = val.filter((item) => {
        return item.recommended != "1";
      });
      this.idsRecommendAll = this.idsRecommend.map((item) => item.id);
    },
    // 添加动态
    add(row) {
      this.dialogFormVisibleA = true;
      console.log(row);
      this.formA.id = row.id_code;
    },
    // 确认添加
    async addRobot() {
      let { code, data } = await addRobot_api({
        user_id: this.formA.id,
        title: this.formA.textarea,
        type: this.formA.medias_type,
        photos: this.formA.medias_type == "1" ? [this.formA.medias.path] : [],
        video: {
          url: this.formA.medias_type == "2" ? this.formA.medias.path : "",
          times: this.videoTime,
          width: this.videoWidth,
          high: this.videoHeight,
        },
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "动态添加成功!",
        });
        this.getRobotList();
        this.dialogFormVisibleA = false;
      }
    },
    // 添加动态
    addRobt() {
      this.dialogFormVisibleB = true;
    },
    // 确认添加
    async addRobotB() {
      let { code, data } = await addRobot_api({
        user_id: this.formA.id,
        title: this.formA.textarea,
        type: this.formA.medias_type,
        photos: this.formA.medias_type == "1" ? [this.formA.medias.path] : [],
        video: {
          url: this.formA.medias_type == "2" ? this.formA.medias.path : "",
          times: this.videoTime,
          width: this.videoWidth,
          high: this.videoHeight,
        },
      });
      if (code == 0) {
        this.$message({
          type: "success",
          message: "动态添加成功!",
        });
        this.getRobotDynamic();
        this.dialogFormVisibleB = false;
      }
    },

    // 编辑弹框
    revise(row) {
      this.AddDialogVisible = true;
      console.log(row);
      this.form.sex = row.sex;
      this.form.phone = row.account;
      this.form.nickName = row.nick_name;
      this.form.user_id = row.id_code;
      this.form.num = row.credit;
      this.form.title = row.verified_name;
      this.form.url = row.photo;
    },
    // 确认编辑
    SubmitRevise() {
      let { code, data } = editRobot_api({
        user_id: this.form.user_id,
        account: this.form.phone,
        nick_name: this.form.nickName,
        credit: this.form.num,
        bind_user_id: this.form.bigID,
      });
      if (code == 0) {
        this.AddDialogVisible = false;
        this.getRobotList();
      }
    },

    //覆盖默认的上传行为，自定义上传的实现
    async upLoad(file) {
      await ossToken({
        type: this.formA.medias_type == 1 ? 0 : 1,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      let files = file.file,
        point = files.name.lastIndexOf("."),
        suffix = files.name.substr(point),
        fileName = files.name.substr(0, point),
        date = Date.parse(new Date());
      console.log(files, "9527");
      // fileNames = "/img/" + file.file.name;
      let path1 = this.formA.medias_type == 1 ? "/img/" : "/video/";
      let fileNames =
        path1 +
        Math.round(new Date() / 1000) +
        "." +
        file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
      console.log(fileNames);
      // console.log(file.file.name.substring(file.file.name.lastIndexOf(".")+1));
      //fileNames上传文件的名称
      //file.file上传文件的内容
      client(this.dataObj)
        .multipartUpload(fileNames, file.file)
        .then((result) => {
          this.formA.medias.path = fileNames;
          //下面是如果对返回结果再进行处理，根据项目需要
          self.$message({
            message: "上传成功",
            type: "success",
          });
        })
        .catch((err) => {
          self.$message.error("上传失败");
        });
    },
    // 监听视频时长，宽度高度
    uploadVideoChange(file) {
      this.getVideoMsg(file.raw).then((videoinfo) => {
        const { duration, height, width } = videoinfo;
        //获取到视频的时长,高度,宽度
        // console.log(duration, "timer");
        this.videoTime = duration;
        this.videoWidth = width;
        this.videoHeight = height;
      });
    },
    getVideoMsg(file) {
      return new Promise((resolve) => {
        let videoElement = document.createElement("video");
        videoElement.src = URL.createObjectURL(file);
        videoElement.addEventListener("loadedmetadata", function () {
          resolve({
            duration: videoElement.duration,
            height: videoElement.videoHeight,
            width: videoElement.videoWidth,
          });
        });
      });
    },
    // 文件上传限制
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isImg = testmsg === "jpg" || testmsg === "JPG";
      const isVidio = testmsg === "mp4";
      if (isImg) {
        this.formA.medias_type = "1";
        return true;
      } else if (isVidio) {
        this.formA.medias_type = "2";
        return true;
      } else {
        this.$message({
          type: "error",
          message: "不支持上传文件格式",
        });
        return false;
      }
    },
    handleExceed() {
      this.$message.warning(`最多只能上传一个文件`);
    },
  },
};
</script>

<style lang="less" scoped>
.robot {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    flex-wrap: wrap;
    .displayPage {
      display: flex;
      .el-select {
        width: 160px;
        margin-right: 30px;
      }
      .p {
        border: 1px solid #dcdfe6;
        border-right: 0px;
        height: 40px;
        line-height: 20px;
        margin: 0px;
        background: #f5f7fa;
        color: #909399;
        font-size: 14px;
        padding: 10px;
        border-radius: 4px 0px 0px 4px;
      }
    }
    .el-input {
      width: 260px;
      margin-right: 30px;
      margin-bottom: 10px;
    }
    .el-button {
      margin-bottom: 10px;
    }
  }
}
</style>